<template>
	<view class="charts">
		<f2 :init="initChart" :charts="chartCopyData" />
	</view>
</template>

<script>
	import f2 from '@/components/i-uni-f2/f2.vue'
	export default {
		name: 'ChartOneLineNosmooth',
		props: {
			chartData: Object
		},
		components: {
		    f2
		},
		data() {
			return {
			};
		},
		computed: {
			chartCopyData() {
				return this.chartData.data;
			}
		},
		methods: {
			initChart(F2, config) {
			    const chart = new F2.Chart(config)
			    chart.source(this.chartData.data);
			    chart.axis(this.chartData.x, {
			    	tickLine: {
			    		lineWidth: 1,
			    		stroke: '#555555',
			    		length: 5,
			    		alignTick: false
			    	},
			    	line: {
			    	    lineWidth: 1,
			    	    stroke: '#555555',
			    	    top: true, // 展示在最上层
			    	},
			    	label: {
			    		fill: '#555555'
			    	}  
			    });
			    chart.axis(this.chartData.y, {
			    	grid: null,
			    	label: {
			    		fill: '#555555'
			    	}  
			    });
			    chart.line().shape('line').position(this.chartData.x + '*' + this.chartData.y).color(this.chartData.color);
			    chart.legend({
			      custom: true,
			      align: 'center',
			      wordSpace: 10,
			       items: [{
			          name: this.chartData.name,
			          marker:(x, y, r, ctx) => {
			    		r = 4;
			    		ctx.lineWidth = 2;
			    		ctx.strokeStyle = this.chartData.color;
			    		ctx.moveTo(x - r - 8, y);
			    		ctx.lineTo(x - r - 2, y);
			    		ctx.stroke();
			    		ctx.moveTo(x + r, y);
			    		ctx.lineTo(x + r + 2, y);
			    		ctx.stroke();
			    		ctx.arc(x - 3, y, r, 0, Math.PI * 2, false);
			    		ctx.stroke();
			    	  },
			        }]
			    });
			    chart.tooltip({
			    	showTitle: true,
			    	background: {
			    	  radius: 4,
			    	  fill: '#fcfcfc',
			    	  padding: [ 6, 10 ],
			    	  shadowBlur: 20
			    	},
			    	titleStyle: {
			    	  fontSize: 14,
			    	  fill: '#555555',
			    	  textAlign: 'start',
			    	  textBaseline: 'top'
			    	},
			    	nameStyle: {
			    	  fontSize: 14,
			    	  fill: '#555555',
			    	  textAlign: 'start',
			    	  textBaseline: 'middle'
			    	},
			    	valueStyle: {
			    	  fontSize: 14,
			    	  fill: '#555555',
			    	  textAlign: 'start',
			    	  textBaseline: 'middle'
			    	},
			    	onShow:(obj) => {
			    		obj.items[0].name = this.chartData.name;
			    		obj.items[0].value += this.chartData.unit;
			    	}
			    });
			    chart.scale(this.chartData.x,{
			    	tickCount: 5,
			    	isRounding: true
			    })
			    chart.point().position(this.chartData.x + '*' + this.chartData.y).color(this.chartData.color).style(this.chartData.y, {
			    	  stroke: this.chartData.color,
			    	  lineWidth: 2,
			    	  fill: '#FFF',
			    	  r: function r(val) {
			    	    return 3;
			    	  }
			    })
				chart.render();
			    return chart
			}
		}
	}
</script>

<style scoped>
	.charts {
		width: 100%;
		height: 100%;
	}
</style>
